<!--
 * @Description: 意见区
-->
<template>
  <div class="opinion-area-wrapper">
    <base-comment
      v-if="commentData"
      :data="commentData"
      :canReply="canReply"
      :pushPeopleList="pushPeopleList"
      :isSetSecretLevel="isSetSecretLevel"
      @praiseTotalAdd="(num) => (commentData.praiseTotal = +commentData.praiseTotal + num)"
      v-watermark />
    <a-spin v-if="hasNextPage" :spinning="spinning">
      <a-button class="comment-load-more" @click="getData">
        {{ $i18n('cap4.form.business.loadmore') }}
      </a-button>
    </a-spin>
  </div>
</template>
<script>
  // 引入意见区组件
  import BaseComment from './base-comment.vue';
  // 引入基础数据
  import { useBaseInfoStore } from '@/store/modules/base-info.js';
  import { mapState } from 'pinia';
  import globalData from '@/plugins/data';
  import api from '@/api';

  const baseInfoStore = useBaseInfoStore();
  export default {
    name: 'OpinionArea',
    components: { BaseComment },
    props: {
      ready: {
        type: Boolean
      },
      completeCallback: {
        type: Function
      }
    },
    data() {
      return {
        isRender: false,
        commentData: null,
        //能否回复
        canReply: false,
        isSetSecretLevel: false,
        //显示页的起始记录数的偏移量
        offset: 1,
        //加载中
        spinning: false,
        //是否有下一页
        hasNextPage: false
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['pushPeopleList'])
    },
    watch: {
      // 监听baseInfo数据是否获取
      // ready(val) {
      //   if (val && !this.isRender) {
      //
      //   }
      // },
    },
    mounted() {
      this.getData();
      this.getPushedPeopleList();
      this.isRender = true;
      this.canReply = baseInfoStore.baseInfo.businessData.summary.canReply; // 控制能否回复
      // this.canPraise = baseInfoStore.baseInfo.businessData.summary.canPraise; // 能否进行点赞操作
      this.isSetSecretLevel = !baseInfoStore.baseInfo.secretLevel.hidden;
    },
    methods: {
      commentParams() {
        if (baseInfoStore.baseInfo) {
          var zwIframe = baseInfoStore.baseInfo.zwIframe.mainbody;
          var affair = baseInfoStore.baseInfo.businessData.affair;
          return {
            moduleId: zwIframe.moduleId,
            affairId: affair.id,
            moduleType: zwIframe.moduleType,
            offset: this.offset,
            limit: 10,
            queryType: 0
          };
        }
        return {};
      },
      /**
       * @description: 获取所有数据
       * @param {*}
       * @return {*}
       */
      async getData(isInit) {
        try {
          this.spinning = true;
          const { commentData, hasNextPage } = await api.commentGetList(this.commentParams());

          // 评论数据
          if (commentData.length) {
            //增加评论区域展示标识。为false就不展示
            //点击哪个的回复，就把相应参数设置进去
            commentData.forEach((d) => {
              d.comments.forEach((item) => {
                item.commentSubmitParams = false;
              });
            });
            //如果已经有评论了，那么就加进去
            if (this.commentData?.comments) {
              this.commentData.comments.push(...commentData[0].comments);
            } else {
              //否则初始化
              this.commentData = commentData[0];
            }
          }

          //更新打印数据
          baseInfoStore.$patch((state) => {
            state.print.commentData = this.commentData;
          });

          //有下一页，页数+1
          if ((this.hasNextPage = hasNextPage)) {
            this.offset++;
          }

          //通知其他相关组件（人员检索）又加了几条数据
          this.$root.$emit('commentUpdate');
        } finally {
          this.spinning = false;
          this.$nextTick(() => {
            this.completeCallback && this.completeCallback();
          });
        }
      },
      //获取推送人员数据
      async getPushedPeopleList() {
        baseInfoStore.updatePushPeopleList(await api.commentGetAtList(globalData.summaryId));
      }
    }
  };
</script>

<style lang="scss" scoped>
  .opinion-area-wrapper {
    > .opinion-area {
      margin-bottom: 0;
    }

    .comment-load-more {
      display: block;
      width: $comment-width + px;
      margin: 10px auto;
    }
  }
</style>
